<template>
	<view class="wui-progress" :style="[styleComputed]">
		<view class="wui-progress-background" :class="[animation ? 'wui-progress-animation' : '']" :style="[styleComputed]"></view>
		<view class="wui-progress-number" :style="[styleComputed]">{{ progress }}%</view>
	</view>
</template>

<script>
export default {
	name: 'w-progress',
	props: {
		progress: {
			type: Number,
			default: 0
		},
		animation: {
			type: Boolean,
			default: false
		},
		backgroundColor: {
			type: String,
			default: '#E54D42'
		},
		height: {
			type: String,
			default: '28'
		},
		borderRadius: {
			type: String,
			default: '10'
		},
		textColor:{
			type: String,
			default: '#fff'
		}
	},
	computed: {
		styleComputed() {
			return {
				'--progress-width': this.progress + '%',
				'--height': uni.upx2px(this.height) + 'px',
				'--border-radius': uni.upx2px(this.borderRadius) + 'px',
				'--background-color': this.backgroundColor,
				'--text-color':this.textColor
			};
		}
	}
};
</script>

<style lang="scss" scoped>
/* 进度条动画 */
@keyframes progressAnimation {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 40rpx 0;
	}
}

@keyframes progress {
	from {
		width: 0;
	}

	to {
		width: var(--progress-width);
	}
}

.wui-progress {
	height: var(--height);
	overflow: hidden;
	position: relative;
	border-radius: var(--border-radius);
	background-color: #e2e2e2;

	.wui-progress-background {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		width: var(--progress-width);
		max-width: 100%;
		height: 100%;
		transition: width 0.3s;
		background: var(--background-color);
		animation: progress 1.5s ease backwards, progressAnimation 2s linear infinite;
	}

	.wui-progress-animation {
		background-image: linear-gradient(
			45deg,
			hsla(0, 0%, 100%, 0.15) 25%,
			transparent 0,
			transparent 50%,
			hsla(0, 0%, 100%, 0.15) 0,
			hsla(0, 0%, 100%, 0.15) 75%,
			transparent 0,
			transparent
		);
		background-size: 40rpx 40rpx;
	}

	.wui-progress-number {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		color: var(--text-color);
		font-size: 22rpx;
	}
}
</style>
